<template>
  <!-- 我的消息页面 -->
  <div class="myMessage">
    <el-card body-style="margin-top:20px;" class="searchMessage" shadow="never">
      <div slot="header">
        <span> <div class="el-icon-message " /> 我的消息</span>
      </div>
      <el-form ref="searchForm" class="searchForm" :model="searchForm" :inline="true">
        <!-- 搜索消息 -->
        <div>
          <!-- 时间选择 -->
          <el-form-item class="datePicker" label="时间:">
            <el-date-picker
              v-model="searchForm.value"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              @blur="showTime"
            />
          </el-form-item>
        </div>

        <div>
          <!-- 阅读状态选择 -->
          <el-form-item label="阅读状态">
            <el-select v-model="searchForm.isRead" style="width:250px" size="medium" placeholder="请选择" @change="change">
              <el-option label="未阅" :value="false" />
              <el-option label="已阅" :value="true" />
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item class="button">
            <el-button plain size="small" @click="reset">重置</el-button>
            <el-button type="primary" size="small" @click="search">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>

    <!-- 消息列表部分 -->
    <el-card shadow="never" body-style="margin-top:20px;" class="messageList">
      <div slot="header">
        <span> <div class="el-icon-document" />消息列表</span>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="messageNum"
          label="序号"
          width="100"
          type="index"
        />
        <el-table-column
          prop="messageType"
          :formatter="formatter"
          label="消息类型"
          width="200"
        />
        <el-table-column
          prop="createTime"
          label="时间"
        />
        <el-table-column
          prop="info"
          :show-overflow-tooltip="true"
          label="内容"
          width="300"
        />
        <el-table-column
          :formatter="readState"
          prop="isRead"
          label="阅读状态"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="note"
          label="备注"
        />
        <el-table-column
          label="操作"
          width="400"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="checkMessage(scope)">查看</el-button>
            <el-button type="text" size="small" @click="remark(scope)">备注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <!-- 消息表格分页器 -->
        <el-pagination
          :current-page="searchForm.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { messageListApi, messageInfoApi } from '@/api/myMessage'
export default {
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      msg: '传参测试',
      messageInfo: {}, // 查看消息详情
      num: 0, // 序号
      totalPage: 0, // 列表总数
      token: '', // token的值
      searchForm: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 每条页数
        value: [], // 查询日期
        isRead: '', // 阅读状态
        beginDate: '', // 查询开始时间
        endDate: ''// 查询结束时间
      },
      tableData: []
      //
    }
  },

  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取表单
    this.loadComments()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    reset() { // 搜索重置
      this.searchForm.beginDate = ''
      this.searchForm.endDate = ''
      this.searchForm.isRead = ''
      this.searchForm.value = []
      this.loadComments()
    },
    showTime() { // 选择时间按钮
      if (this.searchForm.value === null) {
        this.searchForm.value = []
      } else {
        this.searchForm.beginDate = this.searchForm.value[0]
        this.searchForm.endDate = this.searchForm.value[1]
      }
    },
    // 表单消息类型布尔值转换
    formatter(row, index) {
      if (row.messageType === true) {
        row.messageType = '系统消息'
      }
      if (row.messageType === false) {
        row.messageType = '销售单消息'
      }
      return row.messageType
    },
    // 阅读状态布尔值转换
    readState(row, index) {
      if (row.isRead === true) {
        row.isRead = '已读'
      }
      if (row.isRead === false) {
        row.isRead = '未读'
      }
      return row.isRead
    },

    // 显示消息列表页
    loadComments() {
      messageListApi(this.searchForm).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.list
          this.totalPage = res.data.total
        }
      })
    },
    remark(val) { // 跳转到备注并且传递参数
      this.$router.push({
        name: 'Remark',
        query: {
          messageDetail: JSON.stringify(val.row)
        }
      })
    },
    checkMessage(val) { // 跳转页面到信息详情
      messageInfoApi(val.row.id).then(res => {
        if (res.code === 200) {
          // 将获取的数据储存对象中
          this.messageInfo = res.data
        } else {
          this.$message({
            message: '获取数据失败!',
            type: 'error'
          })
        }
      })
      // 页面跳转并传参
      this.$router.push({
        name: 'messageDetail',
        query: {
          messageDetail: JSON.stringify(val.row)
        }
      })
    },
    search() { // 条件查询
      this.loadComments()
    },
    change() { // 更改搜索表单中的阅读状态

    },
    handleSizeChange(val) { // 分页器事件每页条数
      this.searchForm.pageSize = val
      this.loadComments()
    },
    handleCurrentChange(val) { // 分页器事件当前页
      this.searchForm.pageNum = val
      this.loadComments()
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang="scss">
.myMessage{
  // 页面背景样式
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f0f2f5;
  .searchMessage{
    // 搜索表单样式
    margin: 30px;
    .searchForm{
      display: flex;
    }
  }
  .messageList{
    //消息列表样式
    margin: 30px;
  }
 .block{//分页器样式
   margin-top: 20px;
     padding: 20px;
     display: flex;
     justify-content: center;
   }

}
</style>
